<template>
    <div > 
        <el-button-group>
            <el-button @click="addUI" type="success" icon="el-icon-edit">添加</el-button>
            <el-button @click="batchDelete" type="danger" icon="el-icon-delete">批量删除</el-button>
            </el-button-group>
          <el-table   
            border
            style="width: 100%"
            :data="pagination.records"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column v-for="column in columns" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column>

            <!--自定模板-->
             <el-table-column label="头像">
                <template slot-scope="scope">
                     <img v-if="scope.row.photo!=null" :src="$imgHost+scope.row.photo" width="50"/>
                </template>
             </el-table-column>


         <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit( scope.row)">编辑</el-button>
                    
                    
                <el-popconfirm 
                    icon="el-icon-question"
                    icon-color="red"
                    title="是否确定删除该记录？"
                    @confirm="handleDelete( scope.row)"
                    >
                  <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
                </template>
                </el-table-column>

        </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[3,5,8,10]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>

        <!--添加-->
        <el-dialog title="收货地址" :visible.sync="addTag">
            <el-form label-width="100" >
                <el-form-item label="用户名"  >
                <el-input v-model="user.name" autocomplete="off"></el-input>
                </el-form-item>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTag = false">取 消</el-button>
                <el-button type="primary" @click="addTag = false">确 定</el-button>
            </div>
            </el-dialog>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
          columns:[
              {prop:'uid',label:'编号',width:'100'},
              {prop:'uname',label:'姓名',width:'250'},
              {prop:'sex',label:'性别',width:'100'},
              {prop:'birthday',label:'出生日期',width:'250'},
          ],
         pagination:{},
         user:{},
         addTag:false
        }
    },
    components: {},
    methods: {
      find(page=1,size=3){
          let url="/user/findPages";
          let params=new URLSearchParams();
          params.append("current",page);
          params.append("size",size)
          this.$axios.post(url,params).then(resp=>{
               this.pagination=resp.data;
          });
      },
      handleDelete(row){
          this.$message({
              message:"删除成功:"+row.uid,
              type:"success"
          })
        //异步删除

      },
      handleEdit(row){
          console.log(row);
      },
      handleSizeChange(size){
             this.find(this.pagination.current,size);
      },
      handleCurrentChange(page){
         this.find(page,this.pagination.size);
      },
      batchDelete(){
          var rows=this.$refs.userTable.selection;
          rows.forEach(user => {
              console.log(user.uid)
          });
      },
      addUI(){
          this.addTag=true;
      }

    },
    mounted() {
        this.find();
    },
}
</script>

<style  scoped>
</style>
